<template>
  <div>
    <div style="margin-bottom: 20px;">
      <el-card shadow="hover" body-style="width:100%;">
        <div style="display: flex">
          <div style="display: flex;align-items:center;margin-right:20px">
            <i class="el-icon-user" />
          </div>
          <div style="display: flex;align-items:center;margin-right:10px">商家名称：</div>
          <el-input v-model="comment.username" style="width: 200px" placeholder="请输入用户名" clearable />
          <div style="display: flex;align-items:center;margin-left:20px;">
            <i class="el-icon-location-outline" />
          </div>
          <div style="display: flex;align-items:center;margin-left:30px;margin-right:5px ">打卡位置：</div>
          <el-input v-model="comment.location" style="width: 200px" placeholder="请输入地址" clearable />
          <div style="display: flex;align-items:center;margin-left:20px;">
            <i class="el-icon-loading" />
          </div>
          <div style="display: flex;align-items:center;margin-left:20px;margin-right:10px">频率：</div>
          <!--          <el-input v-model="phone" style="width: 200px" placeholder="请输入频率" clearable />-->
          <el-select v-model="comment.comments" placeholder="请选择" clearable>
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <div style="padding: 0px 20px;margin-left: 50px">
            <el-button type="primary" icon="el-icon-search" @click="load">查找</el-button>
          </div>
          <div>
            <el-button type="primary" plain icon="el-icon-info" @click="clearInput">清空</el-button>
          </div>
        </div>
      </el-card>
    </div>
<!--    <div style="margin: 10px 0">-->
<!--      &lt;!&ndash;      <el-button type="primary" @click="handleAdd">新增 <i class="el-icon-circle-plus-outline" /></el-button>&ndash;&gt;-->
<!--      <el-popconfirm-->
<!--        class="ml-5"-->
<!--        confirm-button-text="确定"-->
<!--        cancel-button-text="我再想想"-->
<!--        icon="el-icon-info"-->
<!--        icon-color="red"-->
<!--        title="您确定批量删除这些数据吗？"-->
<!--        @confirm="delBatch"-->
<!--      >-->
<!--        &lt;!&ndash;        <el-button slot="reference" type="danger">批量删除 <i class="el-icon-remove-outline" /></el-button>&ndash;&gt;-->
<!--      </el-popconfirm>-->
<!--    </div>-->

    <el-card shadow="hover">
      <el-table :data="sighList" border stripe :header-cell-class-name="'headerBg'" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="ID" width="80" sortable />
        <el-table-column prop="username" label="商家名称" align="center" />
        <el-table-column prop="location" label="打卡位置" width="250"/>
        <el-table-column prop="dakaTime" label="打卡时间" align="center" />
        <el-table-column prop="comments" label="打卡频率" align="center" />
        <el-table-column prop="clockingRecords" label="打卡次数" align="center" />
        <el-table-column prop="integral" label="打卡积分" align="center" />

        <el-table-column label="操作" width="300" align="center">
          <template slot-scope="scope">
            <el-button style="margin-right: 20px" type="success" @click="handleEdit(scope.row)">编辑 <i class="el-icon-edit" /></el-button>
            <el-popconfirm
              class="ml-5"
              confirm-button-text="确定"
              cancel-button-text="我再想想"
              icon="el-icon-info"
              icon-color="red"
              title="您确定删除吗？"
              @confirm="deleteById(scope.row)"
            >
              <el-button
                slot="reference"
                style="width: 80px"
                type="danger"
              >删除 <i class="el-icon-remove-outline" /></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <div style="padding: 10px 0">
        <el-pagination
          :current-page="pageParams.page"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="pageParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageParams.page"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

      <el-dialog title="信息" :visible.sync="dialogFormVisible" width="40%" :close-on-click-modal="false">
        <el-form label-width="140px" size="small" style="width: 85%;">
          <el-form-item label="商家名称">
            <el-input v-model="form.username" autocomplete="off" disabled />
          </el-form-item>
          <el-form-item label="打卡位置">
            <el-input v-model="form.location" autocomplete="off" disabled />
          </el-form-item>
          <el-form-item label="打卡时间">
            <el-date-picker v-model="form.dakaTime" disabled type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" />
          </el-form-item>
          <el-form-item label="打卡次数">
            <el-input v-model="form.clockingRecords" autocomplete="off" disabled />
          </el-form-item>
          <el-form-item label="打卡积分">
            <el-input v-model="form.integral" autocomplete="off" disabled />
          </el-form-item>
          <el-form-item label="打卡频率">
            <el-select v-model="form.comments" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Sign',
  data() {
    return {
      options: [{
        value: '1',
        label: '一般'
      }, {
        value: '2',
        label: '中等'
      }, {
        value: '3',
        label: '优秀'
      }],
      value: '',
      tableData: {},
      sighList: [],
      // 分页参数
      pageParams: {
        page: 1,
        pageSize: 10,
        total: 0
      },
      comment: {
        username: '',
        location: '',
        comments: ''
      },
      name: '',
      form: {},
      dialogFormVisible: false,
      multipleSelection: [],
      user: localStorage.getItem('user') ? localStorage.getItem('user') : {}
    }
  },
  mounted() {
    this.load()
  },
  methods: {
    // 删除这条信息
    async deleteById(row) {
      this.$confirm('删除这条物料信息后后无法回撤, 是否继续?', '删除物料信息?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const res = await this.$API.sign.reqdeleteById(row)
          if (res.code === 200) {
            this.$message.success('删除成功')
            this.load()
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
          this.load()
        })
    },
    clearInput() {
      this.comment.username = ''
      this.comment.location = ''
      this.comment.comments = ''
      this.load()
    },
    async load() {
      const selectedOption = this.options.find(option => option.value === this.comment.comments)
      const selectedLabel = selectedOption ? selectedOption.label : ''
      console.log(selectedLabel)
      console.log(this.comment)
      this.comment.comments = selectedLabel
      const res = await this.$API.sign.reqmessageByPage(this.pageParams, this.comment)
      if (res.code === 200) {
        this.pageParams.total = res.data.total
        this.sighList = res.data.sighVoList
      }
    },

    async save() {
      const selectedOption = this.options.find(option => option.value === this.form.comments)
      const selectedLabel = selectedOption ? selectedOption.label : this.form.comments
      console.log(selectedLabel)
      console.log(this.tableData)
      this.tableData.comments = selectedLabel
      const res = await this.$API.sign.reqUpdateMessage({ ...this.tableData })
      if (res.code === 200) {
        this.$message({
          type: 'success',
          message: '保存成功'
        })
        this.dialogFormVisible = false
        this.load()
      }
    },

    handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row))
      console.log(this.form)
      this.tableData = row
      this.dialogFormVisible = true
    },
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    },

    handleSizeChange(pageSize) {
      console.log(pageSize)
      this.pageParams.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      console.log(pageNum)
      this.pageNum = pageNum
      this.load()
    }
  }

}
</script>

<style>
.headerBg {
  background: #eee!important;
}
</style>

